<template>
	<div id="blog_info" class="dashu_scrollbar" v-show="info">
		<div v-if="info" >
			<div class="blog_info_div ql-snow">
				<div class="blog_info_div_left" >
				</div>
				<div class="blog_info_div_mid ql-editor" >
					<div class="blog_info_div_mid_title">{{info.title}}</div>
					<div class="blog_info_div_mid_title_user">
						<img class="blog_info_div_mid_title_head" src="../../../../static/img/luxun.jpg" />
						<div class="blog_info_div_mid_title_name">
							<div>{{info.nickName}}</div>
							<div>{{info.createTime | toTime}}</div>
						</div>
						<div style="clear: both;"></div>
					</div>
					<div class="blog_info_div_mid_content" v-html="info.content"></div>
					<div>
						<hr />
					</div>
				</div>
				<div class="blog_info_div_right" >
				</div>
			</div>
			<!-- 关闭当前界面 -->
			<div class="info_close" @click="infoClose">
				<el-tooltip content="点这里返回" placement="top">
					<span class="el-icon-arrow-left"></span>
				</el-tooltip>
			</div>
		</div>
	</div>
</template>

<script type="application/ecmascript-6">
export default {
  data() {
    return {};
  },
  props: {
    info: {
      type: Object
    }
  },
  filters: {
    toTime: function(time) {
      var today = new Date(time);
      return today.Format("yyyy-MM-dd hh:mm:ss");
    }
  },
  methods: {
    infoClose: function() {
      //滚动条回到原点
      document.getElementById("blog_info").scrollTop = 0;
      this.$emit("infoColse", false);
    }
  }
};
</script>

<style lang="stylus" rel="stylesgeet/stylus" >

#blog_info
  width:80%
  height:100vh
  position:absolute
  top:0
  background-color:#fff
  OVERFLOW-Y: auto
  OVERFLOW-X: hidden
  .blog_info_div
    display:flex
    flex-flow: row wrap
    .blog_info_div_left
      flex:1
    .blog_info_div_mid
      width:670px
      padding:0 10px 0 10px
      height:100vh
      word-break:break-all
      .blog_info_div_mid_title
        word-break: break-word!important
        word-break: break-all
        margin: 50px 0 0
        font-family: -apple-system,SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif
        font-size: 34px
        font-weight: 700
        line-height: 1.3
      .blog_info_div_mid_title_user
        margin-top: 30px
        .blog_info_div_mid_title_head,.blog_info_div_mid_title_name
          float:left
        .blog_info_div_mid_title_name
          margin-left:10px
          margin-top:15px
          div:nth-child(n+2)
            margin-top: 5px
            font-size: 12px
            color: #969696
        .blog_info_div_mid_title_head
          width:50px
          border-radius:25px
      .blog_info_div_mid_content
        margin-top:50px
        width:650px;
        line-height: 1.7
        font-size: 16px
        font-weight: 400
        color: #2f2f2f
        word-break:break-all
    .blog_info_div_right
      flex:1
  .info_close
    position:fixed
    top:30px
    margin-left:50px
    width:40px
    height:40px
    border-radius:20px
    text-align: center
    line-height: 40px
    font-size:25px
  .info_close:hover
    cursor:pointer
</style>
